<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>系统消息</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
</head>

<body>
<div id="top">
    <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>
</div>

<div id="left">
    <%@include file="/WEB-INF/jsp/common/component/userMessage.jsp"%>
    <%@include file="/WEB-INF/jsp/common/component/menu.jsp"%>
</div><!-- /#left -->

<div id="wrap">
    <div class="content" >
        <div class="inner">

            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#table" data-toggle="tab">全部</a></li>
                <li><a href="#table" data-toggle="tab">已读</a></li>
                <li><a href="#table" data-toggle="tab">未读</a></li>
            </ul>
            <div id="searchPanel" class="panel panel-default" style="margin-top:10px;display: none;">
                <div class="panel-heading">查询条件</div>
                <div class="panel-body">
                    <form id="formSearch" class="form-horizontal">
                        <div class="form-group" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_departmentname">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_statu">
                            </div>
                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <table id="table">
            </table>
        </div>
    </div><!-- /#content -->
    <%@include file="/WEB-INF/jsp/common/component/footer.jsp"%>
</div><!-- /#wrap -->
<%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

<script>
    function setStatus(messageId){
        waitMessage();

        $.ajax({
            url: path + "/message/setStatus",
            type: "post",
            dataType: "json",
            data:{
                id: messageId
            },
            success: function(data){
                if(data.success){
                    successMessage("操作成功", function(){
                        table.bootstrapTable('refresh');
                        //同步侧边栏和导航栏的数字
                        var val = $("#menuMessage").text() - 1;
                        if(val > 0){
                            $("#menuMessage").text(val);
                            $("#navbarMessage").text(val);
                        }else{
                            $("#menuMessage").text(null);
                            $("#navbarMessage").text(null);
                        }
                    });
                } else{
                    errorMessage("操作失败！请重试");
                }
            }
        });

    }

    function statusFormatter(value, row, index){
        return message_status[value];
    }

    function actionFormatter(value, row, index){
        var res = "";
        if(row.status == message_status_unread){
            res += "<button onclick='setStatus(\"" + row.id + "\")' type='button' class='btn btn-info btn-sm'>设为已读</button> &nbsp;&nbsp;";
        }

        return res;
    }

    var table = $('#table');

    $(document).ready(function(){
        //查询的 JSON 对象，发送时转成字符串
        var filter = "";

        $("#searchBtn").click(function(){
            $("#searchPanel").fadeToggle(800);
        });

        table.bootstrapTable({
            //定义列
            columns: [
//                {field: 'checkbox', title:'', checkbox: true},
                {field: 'id', title: '', visible: false},
                {field: 'title', title: '标题', titleTooltip: "标题"},
                {field: 'content', title: '内容',titleTooltip: "内容"},
                {field: 'status', title: '状态',titleTooltip: "状态", formatter: statusFormatter},
                {field: 'action', title: '操作',titleTooltip: "操作", formatter: actionFormatter}
            ],
            url: '${ctx}/message/pageData',    //A URL to request data from remote site.
            method: 'get',           //	The method type to request remote data.
            contentType: 'application/json',  //The contentType of request remote data.
            dataType: 'json',            //希望服务器返回的数据类型
            sidePagination: 'server',   //设置为服务器分页
            toolbar: '#toolbar',        //工具按钮用哪个容器
            queryParams: function(params){
                return {
                    page: params.pageNumber,
                    pageSize: params.pageSize,
                    filter: hasData(filter) ? JSON.stringify(filter) : null,
                    sortName: params.sortName,
                    sortOrder: params.sortOrder
                };
            },

            queryParamsType: '',   //Set 'limit' to send query params width RESTFul type.

            responseHandler: function(data) {
                var res = data.dataObj;
                return {
                    "rows": res,
                    "total": data.total
                };
            },
            striped: true,           //表格加上条纹，默认为 false
            pagination: true,       //是否展示页脚，默认为 false
            selectItemName: "btn",  //The name of radio or checkbox input.
            showRefresh: true,        //刷新按钮
            showToggle: true,            //切换表格风格：列表/卡片
            idField: 'id',               //指明那一列是主键
            clickToSelect: true,
            valign: "middle",
            cardView: true,              //是否以卡片形式展示，默认为 false
            paginationDetailHAlign: 'right',    //页码字显示的位置,left/right
            checkboxHeader: false,            //设为 false，则没有选中全部的 checkbox 按钮
            singleSelect: true             //设置 checkbox 仅能选中一行
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 获取已激活的标签页的名称
            var activeTab = $(e.target).text();
            switch(activeTab){
                case "全部":
                    console.info("quanbu!");
                    filter = "";break;
                case "未读":
                    filter = {
                        status:{
                            type: "int",
                            filter: {
                                eq: message_status_unread
                            }
                        }
                    }; break;
                case "已读":filter = {
                    status:{
                        type: "int",
                        filter: {
                            eq: message_status_read
                        }
                    }
                }; break;
            }
            table.bootstrapTable('refresh');
        });
    });
</script>
</body>

</html>